import React, { useState }  from 'react'
import { View,
    Text, 
    ImageBackground,
    StyleSheet,
    Image
 } from 'react-native'
import { TextInput, TouchableOpacity } from 'react-native-gesture-handler'
import '../../common/global'



const Recommend = ({navigation}) => {
    const [value, onChangeText] = React.useState('');
    const [color,setColor]=useState('rgba(0,0,0,0.8)')

    function changColor(color){
        if(color=='rgb(0,0,0,0.8)'){
            return
        }if(color=='#34B9C0'){
            navigation.navigate('mine')
        }
        
    }
    return (

            <View style={styles.all}>
                <Text style={styles.title}>说一下您对我们的评价吧~~</Text>
                <TextInput 
                    onChangeText={tex=>{onChangeText(tex),tex.length>0?setColor('#34B9C0'):setColor('rgba(0,0,0,0.8)')}}
                    value={value}
                style={styles.inp}
                multiline={true}
                >
                    
                </TextInput>
                <TouchableOpacity style={[styles.btn,{backgroundColor:color}]} onPress={()=>changColor(color)}>
                    <View style={styles.value}>
                        <Text style={styles.btnText}>提交</Text>
                    </View>
                </TouchableOpacity>
            </View>
    )
}

export default Recommend

const styles=StyleSheet.create({
    all:{
        width:w,
        height:h,
        padding:10,
        paddingTop:20,
        backgroundColor: 'rgba(230,232,255,1)'
    },
    title:{
        fontSize:20,
        fontWeight:'bold',
        color:'white'
    },
    inp:{
        backgroundColor:'rgba(245,246,247,0.7)',
        width:w-20,
        height:180,
        borderRadius:20,
        marginTop:10,
        color:'black',
        fontSize:20
    },
    value:{
        width:100,
        height:40,
        position:'absolute',
        left:'50%',
        top:'50%',
        marginTop:-20,
        marginLeft:-50,

    },
    btn:{
        width:w-160,
        marginTop:20,
        marginLeft:80,
        height:50,
        borderRadius:30,
        // backgroundColor:'#34B9C0',
        position:'relative'

    },
    btnText:{
        color:'white',
        fontSize:20,
        width:50,
        height:30,
        marginTop:5,
        marginLeft:25,

    }
})